<template>
    <div class="ivz-online-layout">
        <ul class="ivz-online-header">
          <li style="float: left; width: 228px; text-align: center;">
            <span style="font-size: 18px; color: #000000;">ivzone 在线表单设计</span>
          </li>
          <li style="height: 100%; float: left">
            <a-breadcrumb separator="》" style="font-size: 17px; margin-top: 26px;
              display: inline-block; display: inline-block;">
              <template v-for="(path, index) in paths" :key="index">
                <a-breadcrumb-item @click.native="breadcrumdHandle(path)" href="#" :class="path.active ? 'ivz-path-active' : ''">
                  {{path.name}}
                </a-breadcrumb-item>
              </template>
            </a-breadcrumb>
            <span style="font-size: 13px; color: #999999; margin-left: 5px;">(点击可切换组件)</span>
          </li>
          <li style="float: right; min-width: 300px; text-align: center">
            <span style="margin-left: 12px; padding-right: 32px">
              <template v-for="item in leftMetas">
                <label class="ivz-ohl-item" @click="previewHandle(item)">
                    <ivz-icon :type="item.icon" :title="item.title"/>
                </label>
              </template>
            </span>
          </li>
        </ul>
        <div class="ivz-online-body">
            <div class="ivz-ol-item ivz-oli-left">
                <!--在线生成器 - 左侧-->
                <ivz-online-left />
            </div>
            <div class="ivz-ol-item ivz-oli-body">
                <!--在线生成器 - 页面布局-->
              <router-view />
            </div>
            <div class="ivz-ol-item ivz-oli-right">
                <!--在线生成器 - 右侧-->
                <ivz-online-right />
            </div>
        </div>
    </div>
</template>

<script>
import {ref} from 'vue'
import '@/lib/index.css'
import {EventBus, MetaEventType} from '@/event'
import {mapState, mapMutations, useStore} from 'vuex'
import IvzOnlineLeft from "@/components/IvzOnlineLeft.vue";
import IvzOnlineRight from "@/components/IvzOnlineRight.vue";
import {ComponentType} from "@/store/consts.js";

  export default {
    name: "IvzOnline",
    props: ['saveCallback', 'initCallback'],
    components: {IvzOnlineLeft, IvzOnlineRight},
    setup() {
      const leftMetas = ref([
          {title: '界面预览', type: 'preview', icon: 'iz-icon-preview'},
          {title: 'html代码', type: 'html', icon: 'iz-icon-code'},
          {title: 'json元数据', type: 'json', icon: 'iz-icon-json'},
        ]);
      return {leftMetas}
    },
    computed: mapState(['viewGlobal', 'paths']),
    created() {

    },
    methods: {
      ...mapMutations(['setViewGlobalAttr']),
      initCallbackHandle(config) {
          this.metas = config.metas;
          this.drawerMetas = config.drawerMetas;
          if(config.globalConfig) {
            this.$utils.assignProperty(this.global, config.globalConfig);
          }

          this.$refs['onlineRef'].initContainerConfig(config);
      },
      previewHandle(meta) {
        if(typeof meta.handle == 'function') {
          meta.handle();
        } else {
          this.$msg.warningMessage("暂不支持的操作", 1.5);
        }
      },
      breadcrumdHandle(path) {
        this.paths.forEach(item => item.active = false)
        path.active = true;
        EventBus.publish(MetaEventType.path, path)
      }
    }
  }
</script>

<style>
.ivz-ohl-item {
  cursor: pointer;
  margin: 0px 6px;
}
  .ivz-path-active a {
    color: darkorange!important;
  }
</style>
